<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库产品列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            padding-bottom: 60px;
        }
        
        .header {
            background-color: #fff;
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header h1 {
            font-size: 18px;
            font-weight: 600;
        }
        
        .loading-indicator {
            text-align: center;
            padding: 20px;
            display: none;
        }
        
        .loading-indicator.active {
            display: block;
        }
        
        .product-list {
            padding: 10px;
        }
        
        .product-item {
            background-color: #fff;
            border-radius: 8px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            transition: transform 0.2s;
            padding: 15px;
        }
        
        .product-item:active {
            transform: scale(0.98);
        }
        
        .product-image {
            width: 80px;
            height: 80px;
            object-fit: contain;
            flex-shrink: 0;
            margin-right: 15px;
        }
        
        .product-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .product-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .product-type {
            font-size: 14px;
            margin-bottom: 8px;
        }
        
        .type-badge {
            background-color: #e1f5fe;
            color: #03a9f4;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-right: 8px;
        }
        
        .type-badge.relational {
            background-color: #e8f5e9;
            color: #4caf50;
        }
        
        .type-badge.non-relational {
            background-color: #fff3e0;
            color: #ff9800;
        }
        
        .product-update-time {
            font-size: 12px;
            color: #999;
        }
        
        .pull-to-refresh {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 14px;
            background-color: #f5f5f5;
            transition: transform 0.3s;
        }
        
        .pull-to-refresh.active {
            transform: translateY(60px);
        }
        
        .load-more {
            text-align: center;
            padding: 15px;
            color: #666;
            font-size: 14px;
        }
        
        .no-more {
            text-align: center;
            padding: 15px;
            color: #999;
            font-size: 14px;
        }
        
        .error-message {
            text-align: center;
            padding: 20px;
            color: #e74c3c;
            display: none;
        }
        
        .error-message.active {
            display: block;
        }
        
        .spinner {
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top: 3px solid #3498db;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 产品详情弹窗样式 */
        .product-detail-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            justify-content: center;
            align-items: center;
        }
        
        .product-detail-modal.active {
            display: flex;
        }
        
        .modal-content {
            background-color: #fff;
            border-radius: 10px;
            width: 90%;
            max-width: 500px;
            max-height: 80%;
            overflow-y: auto;
            position: relative;
        }
        
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .modal-close {
            font-size: 24px;
            color: #999;
            cursor: pointer;
        }
        
        .modal-body {
            padding: 15px;
        }
        
        .detail-image {
            width: 100px;
            height: 100px;
            object-fit: contain;
            display: block;
            margin: 0 auto 15px;
        }
        
        .detail-item {
            margin-bottom: 15px;
        }
        
        .detail-label {
            font-weight: 600;
            margin-bottom: 5px;
            color: #666;
        }
        
        .detail-value {
            color: #333;
        }
        
        .detail-description {
            line-height: 1.5;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>数据库产品列表</h1>
    </div>
    
    <div class="pull-to-refresh" id="pullToRefresh">
        <div class="spinner"></div>
        <div>下拉刷新...</div>
    </div>
    
    <div class="error-message" id="errorMessage">
        加载失败，请稍后重试
    </div>
    
    <div class="loading-indicator" id="loadingIndicator">
        <div class="spinner"></div>
        <div>加载中...</div>
    </div>
    
    <div class="product-list" id="productList">
        <!-- 产品列表将通过JavaScript动态生成 -->
    </div>
    
    <div class="load-more" id="loadMore">
        <div class="spinner"></div>
        <div>加载更多...</div>
    </div>
    
    <div class="no-more" id="noMore" style="display: none;">
        没有更多数据了
    </div>
    
    <!-- 产品详情弹窗 -->
    <div class="product-detail-modal" id="productDetailModal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">产品详情</div>
                <div class="modal-close" id="modalClose">&times;</div>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- 产品详情将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <script>
        // 配置
        const API_BASE_URL = 'http://localhost:8081';
        const IMAGE_BASE_URL = 'http://localhost:8081/profile';
        const API_ENDPOINT = '/database/product/list';
        
        // 状态
        let currentPage = 1;
        const pageSize = 10;
        let isLoading = false;
        let hasMore = true;
        let isPulling = false;
        let startY = 0;
        let currentY = 0;
        
        // DOM元素
        const productList = document.getElementById('productList');
        const loadingIndicator = document.getElementById('loadingIndicator');
        const errorMessage = document.getElementById('errorMessage');
        const loadMore = document.getElementById('loadMore');
        const noMore = document.getElementById('noMore');
        const pullToRefresh = document.getElementById('pullToRefresh');
        const productDetailModal = document.getElementById('productDetailModal');
        const modalClose = document.getElementById('modalClose');
        const modalBody = document.getElementById('modalBody');
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadProducts();
            setupEventListeners();
        });
        
        // 设置事件监听器
        function setupEventListeners() {
            // 下拉刷新
            document.addEventListener('touchstart', handleTouchStart, { passive: true });
            document.addEventListener('touchmove', handleTouchMove, { passive: true });
            document.addEventListener('touchend', handleTouchEnd);
            
            // 上拉加载更多
            window.addEventListener('scroll', handleScroll);
            
            // 产品详情弹窗关闭事件
            modalClose.addEventListener('click', closeModal);
            productDetailModal.addEventListener('click', function(e) {
                if (e.target === productDetailModal) {
                    closeModal();
                }
            });
        }
        
        // 加载产品数据
        async function loadProducts(isRefresh = false) {
            if (isLoading) return;
            
            isLoading = true;
            loadingIndicator.classList.add('active');
            errorMessage.classList.remove('active');
            
            if (isRefresh) {
                currentPage = 1;
                hasMore = true;
                noMore.style.display = 'none';
                productList.innerHTML = '';
            }
            
            try {
                const url = `${API_BASE_URL}${API_ENDPOINT}?pageNum=${currentPage}&pageSize=${pageSize}`;
                const response = await fetch(url);
                
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }
                
                const data = await response.json();
                
                if (data.code === 200 && data.rows && data.rows.length > 0) {
                    renderProducts(data.rows, isRefresh);
                    currentPage++;
                    
                    if (data.rows.length < pageSize) {
                        hasMore = false;
                        noMore.style.display = 'block';
                        loadMore.style.display = 'none';
                    }
                } else {
                    if (isRefresh) {
                        productList.innerHTML = '<div style="text-align: center; padding: 20px; color: #999;">暂无数据</div>';
                    } else {
                        hasMore = false;
                        noMore.style.display = 'block';
                        loadMore.style.display = 'none';
                    }
                }
            } catch (error) {
                console.error('加载产品数据失败:', error);
                errorMessage.classList.add('active');
            } finally {
                isLoading = false;
                loadingIndicator.classList.remove('active');
            }
        }
        
        // 渲染产品列表
        function renderProducts(products, isRefresh) {
            const fragment = document.createDocumentFragment();
            
            products.forEach(product => {
                const productItem = document.createElement('div');
                productItem.className = 'product-item';
                
                // 根据产品名称获取对应的图片
                let imageUrl = '';
                if (product.databaseName && product.databaseName.toLowerCase().includes('mysql')) {
                    imageUrl = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%234479A1%22/%3E%3Ctext x=%2240%22 y=%2245%22 font-family=%22Arial%22 font-size=%2224%22 fill=%22white%22 text-anchor=%22middle%22%3EMySQL%3C/text%3E%3C/svg%3E';
                } else if (product.databaseName && product.databaseName.toLowerCase().includes('oracle')) {
                    imageUrl = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23F80000%22/%3E%3Ctext x=%2240%22 y=%2245%22 font-family=%22Arial%22 font-size=%2224%22 fill=%22white%22 text-anchor=%22middle%22%3EOracle%3C/text%3E%3C/svg%3E';
                } else if (product.databaseName && product.databaseName.toLowerCase().includes('redis')) {
                    imageUrl = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23DC382D%22/%3E%3Ctext x=%2240%22 y=%2245%22 font-family=%22Arial%22 font-size=%2224%22 fill=%22white%22 text-anchor=%22middle%22%3ERedis%3C/text%3E%3C/svg%3E';
                } else if (product.icon) {
                    imageUrl = `${IMAGE_BASE_URL}${product.icon}`;
                } else {
                    imageUrl = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23f0f0f0%22/%3E%3Ctext x=%2240%22 y=%2245%22 font-family=%22Arial%22 font-size=%2224%22 fill=%22%23999%22 text-anchor=%22middle%22%3EDB%3C/text%3E%3C/svg%3E';
                }
                
                // 确定类型标签样式
                let typeClass = '';
                let typeName = product.type || '未知类型';
                if (typeName.includes('关系')) {
                    typeClass = 'relational';
                } else if (typeName.includes('非关系')) {
                    typeClass = 'non-relational';
                }
                
                productItem.innerHTML = `
                    <img class="product-image" src="${imageUrl}" alt="${product.databaseName || '数据库产品'}" onerror="this.src='data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23f0f0f0%22/%3E%3Ctext x=%2240%22 y=%2245%22 font-family=%22Arial%22 font-size=%2224%22 fill=%22%23999%22 text-anchor=%22middle%22%3EDB%3C/text%3E%3C/svg%3E'">
                    <div class="product-info">
                        <div class="product-name">${product.databaseName || '未知产品'}</div>
                        <div class="product-type">
                            <span class="type-badge ${typeClass}">${typeName}</span>
                            ${product.type && product.type.includes('单机') ? '<span style="color: #ff9800;">单机</span>' : ''}
                        </div>
                        <div class="product-update-time">更新时间: ${product.updateTime || '未知'}</div>
                    </div>
                `;
                
                // 添加点击事件，显示产品详情
                productItem.addEventListener('click', function() {
                    showProductDetail(product);
                });
                
                fragment.appendChild(productItem);
            });
            
            if (isRefresh) {
                productList.innerHTML = '';
            }
            
            productList.appendChild(fragment);
        }
        
        // 处理触摸开始
        function handleTouchStart(e) {
            if (window.scrollY > 0) return;
            
            startY = e.touches[0].clientY;
            isPulling = true;
        }
        
        // 处理触摸移动
        function handleTouchMove(e) {
            if (!isPulling || window.scrollY > 0) return;
            
            currentY = e.touches[0].clientY;
            const pullDistance = currentY - startY;
            
            if (pullDistance > 0) {
                e.preventDefault();
                pullToRefresh.style.transform = `translateY(${Math.min(pullDistance, 60)}px)`;
                
                if (pullDistance > 50) {
                    pullToRefresh.querySelector('div:last-child').textContent = '释放刷新...';
                } else {
                    pullToRefresh.querySelector('div:last-child').textContent = '下拉刷新...';
                }
            }
        }
        
        // 处理触摸结束
        function handleTouchEnd() {
            if (!isPulling) return;
            
            const pullDistance = currentY - startY;
            
            if (pullDistance > 50) {
                pullToRefresh.classList.add('active');
                loadProducts(true);
                
                setTimeout(() => {
                    pullToRefresh.classList.remove('active');
                    pullToRefresh.style.transform = 'translateY(0)';
                }, 1000);
            } else {
                pullToRefresh.style.transform = 'translateY(0)';
            }
            
            isPulling = false;
        }
        
        // 处理滚动
        function handleScroll() {
            if (isLoading || !hasMore) return;
            
            const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
            
            if (scrollTop + clientHeight >= scrollHeight - 100) {
                loadMore.style.display = 'block';
                loadProducts();
            }
        }
        
        // 显示产品详情
        function showProductDetail(product) {
            // 根据产品名称获取对应的图片
            let imageUrl = '';
            if (product.databaseName && product.databaseName.toLowerCase().includes('mysql')) {
                imageUrl = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%234479A1%22/%3E%3Ctext x=%2250%22 y=%2255%22 font-family=%22Arial%22 font-size=%2228%22 fill=%22white%22 text-anchor=%22middle%22%3EMySQL%3C/text%3E%3C/svg%3E';
            } else if (product.databaseName && product.databaseName.toLowerCase().includes('oracle')) {
                imageUrl = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23F80000%22/%3E%3Ctext x=%2250%22 y=%2255%22 font-family=%22Arial%22 font-size=%2228%22 fill=%22white%22 text-anchor=%22middle%22%3EOracle%3C/text%3E%3C/svg%3E';
            } else if (product.databaseName && product.databaseName.toLowerCase().includes('redis')) {
                imageUrl = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23DC382D%22/%3E%3Ctext x=%2250%22 y=%2255%22 font-family=%22Arial%22 font-size=%2228%22 fill=%22white%22 text-anchor=%22middle%22%3ERedis%3C/text%3E%3C/svg%3E';
            } else if (product.icon) {
                imageUrl = `${IMAGE_BASE_URL}${product.icon}`;
            } else {
                imageUrl = 'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23f0f0f0%22/%3E%3Ctext x=%2250%22 y=%2255%22 font-family=%22Arial%22 font-size=%2228%22 fill=%22%23999%22 text-anchor=%22middle%22%3EDB%3C/text%3E%3C/svg%3E';
            }
            
            // 确定类型标签样式
            let typeClass = '';
            let typeName = product.type || '未知类型';
            if (typeName.includes('关系')) {
                typeClass = 'relational';
            } else if (typeName.includes('非关系')) {
                typeClass = 'non-relational';
            }
            
            // 构建详情HTML
            modalBody.innerHTML = `
                <img class="detail-image" src="${imageUrl}" alt="${product.databaseName || '数据库产品'}" onerror="this.src='data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22100%22 height=%22100%22 viewBox=%220 0 100 100%22%3E%3Crect width=%22100%22 height=%22100%22 fill=%22%23f0f0f0%22/%3E%3Ctext x=%2250%22 y=%2255%22 font-family=%22Arial%22 font-size=%2228%22 fill=%22%23999%22 text-anchor=%22middle%22%3EDB%3C/text%3E%3C/svg%3E'">
                <div class="detail-item">
                    <div class="detail-label">产品ID</div>
                    <div class="detail-value">${product.productId || '未知'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">数据库名称</div>
                    <div class="detail-value">${product.databaseName || '未知'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">类型</div>
                    <div class="detail-value">
                        <span class="type-badge ${typeClass}">${typeName}</span>
                        ${product.type && product.type.includes('单机') ? '<span style="color: #ff9800; margin-left: 8px;">单机</span>' : ''}
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">状态</div>
                    <div class="detail-value">${product.status === '0' ? '正常' : '停用'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">描述</div>
                    <div class="detail-value detail-description">${product.description || '暂无描述'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">创建时间</div>
                    <div class="detail-value">${product.createTime || '未知'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">更新时间</div>
                    <div class="detail-value">${product.updateTime || '未知'}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">备注</div>
                    <div class="detail-value">${product.remark || '暂无备注'}</div>
                </div>
            `;
            
            // 显示弹窗
            productDetailModal.classList.add('active');
            document.body.style.overflow = 'hidden'; // 禁止背景滚动
        }
        
        // 关闭弹窗
        function closeModal() {
            productDetailModal.classList.remove('active');
            document.body.style.overflow = ''; // 恢复背景滚动
        }
    </script>
</body>
</html>